<template>
	<view class="my-circles-page">
		<!-- 顶部标题 -->
		<view class="page-header">
			<text class="page-title">我的圈子</text>
			<view class="header-action">
				<button class="create-button" @click="handleCreateCircle">
					<text class="create-icon">+</text>
					<text class="create-text">申请创建</text>
				</button>
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tabs-container">
			<view class="tab-item" :class="{ 'active': activeTab === 'joined' }" @click="switchTab('joined')">
				<text class="tab-text">已加入</text>
				<view class="tab-badge" v-if="joinedCircles.length > 0">
					{{ joinedCircles.length }}
				</view>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'created' }" @click="switchTab('created')">
				<text class="tab-text">我创建的</text>
				<view class="tab-badge" v-if="createdCircles.length > 0">
					{{ createdCircles.length }}
				</view>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'approval' }" @click="switchTab('approval')">
				<text class="tab-text">待审核</text>
				<view class="tab-badge approval-badge" v-if="approvalCircles.length > 0">
					{{ approvalCircles.length }}
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-container">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 圈子列表 -->
			<view v-else-if="currentCircles.length > 0" class="circles-list">
				<CircleCard v-for="circle in currentCircles" :key="circle.id" :circle="circle"
					:show-status="activeTab === 'approval'" @click="handleCircleClick" />
			</view>

			<!-- 空状态 -->
			<EmptyState v-else :type="activeTab" @create-circle="handleCreateCircle"
				@explore-circles="handleExploreCircles" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		getJoinedCircle,
		getCircleCreatedByMe,
		getMyApprovalCircle
	} from '@/api/circle/circle'
	import useUserStore from '@/store/modules/user'
	import CircleCard from './components/CircleCard.vue'
	import EmptyState from './components/EmptyState.vue'

	const userStore = useUserStore()
	const user = userStore.user
	const userId = ref(user.userId)

	// 响应式数据
	const activeTab = ref('joined')
	const loading = ref(false)
	const joinedCircles = ref([])
	const createdCircles = ref([])
	const approvalCircles = ref([])

	// 计算属性
	const currentCircles = computed(() => {
		switch (activeTab.value) {
			case 'joined':
				return joinedCircles.value
			case 'created':
				return createdCircles.value
			case 'approval':
				return approvalCircles.value
			default:
				return []
		}
	})

	// 方法
	const switchTab = (tab) => {
		activeTab.value = tab
	}

	const handleCircleClick = (circle) => {
		// 跳转到圈子详情页
		uni.navigateTo({
			url: `/pages/circle/circleDetail/circleDetail?id=${circle.id}`
		})
	}

	const handleCreateCircle = () => {
		// 跳转到创建圈子页面
		uni.navigateTo({
			url: '/pages/circle/applyCreateCircle'
		})
	}

	const handleExploreCircles = () => {
		// 跳转到圈子探索页面
		uni.switchTab({
			url: '/pages/circle/square/circleSquare'
		})
	}

	const loadCircleData = async () => {
		console.log(userId.value)
		// if (!user?.id) return

		loading.value = true
		try {
			// 并发请求三个接口
			const [joinedRes, createdRes, approvalRes] = await Promise.all([
				getJoinedCircle(userId.value),
				getCircleCreatedByMe(userId.value),
				getMyApprovalCircle(userId.value)
			])

			joinedCircles.value = joinedRes.data || []
			createdCircles.value = createdRes.data || []
			approvalCircles.value = approvalRes.data || []
		} catch (error) {
			console.error('加载圈子数据失败:', error)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 页面加载时获取数据
	onMounted(() => {
		loadCircleData()
	})
</script>

<style lang="scss" scoped>
	.my-circles-page {
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	.page-header {
		background: white;
		padding: 60rpx 40rpx 40rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #eee;

		.page-title {
			font-size: 48rpx;
			font-weight: bold;
		}

		.header-action {
			.create-button {
				background: #667eea;
				border: 2rpx solid #667eea;
				border-radius: 32rpx;
				padding: 16rpx 24rpx;
				display: flex;
				align-items: center;
				transition: all 0.3s ease;

				&:active {
					background: #5a6fd8;
					transform: scale(0.95);
				}

				.create-icon {
					font-size: 36rpx;
					color: white;
					font-weight: bold;
					margin-right: 8rpx;
					line-height: 1;
				}

				.create-text {
					font-size: 28rpx;
					color: white;
					font-weight: 500;
				}
			}
		}
	}

	.tabs-container {
		display: flex;
		background: white;
		border-bottom: 2rpx solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;

		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 32rpx 0;
			position: relative;

			.tab-text {
				font-size: 32rpx;
				color: #666;
				transition: color 0.3s;
			}

			.tab-badge {
				background: #ff6b6b;
				color: white;
				font-size: 20rpx;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
				margin-left: 12rpx;
				min-width: 32rpx;
				text-align: center;

				&.approval-badge {
					background: #ffa500;
				}
			}

			&.active {
				.tab-text {
					color: #667eea;
					font-weight: bold;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background: #667eea;
					border-radius: 3rpx;
				}
			}
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;

		.loading-text {
			color: #999;
			font-size: 28rpx;
		}
	}

	.circles-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}
</style>